import React from "react";
import classnames from "classnames";
import { useHistory } from "react-router-dom";
import Icon from "../Icon";
import { NavBarPropsType } from "./PropsType";
import "./index.less";
export default function NavBar(props: NavBarPropsType) {
  const {
    className,
    mode = "dark",
    style = {},
    title,
    leftContent,
    rightContent,
    onLeftClick = () => {
      history.goBack();
    },
    onRightClick,
    leftIcon = <Icon size="m" iconName="iconback" />,
    rightIcon = <Icon size="m" iconName="icondian" />,
  } = props;
  const cls = classnames("m-react-nav-bar", className, mode);
  const history = useHistory();
  const leftHandelAction = () => {
    onLeftClick();
  };
  const rightHandelAction = () => {
    onRightClick && onRightClick();
  };
  return (
    <div className={cls} style={{ ...style }}>
      <div
        className="m-react-left"
        onClick={leftIcon ? leftHandelAction : null}
      >
        {leftContent ? leftContent : leftIcon}
      </div>
      <div className="m-react-center">{title}</div>
      <div
        className="m-react-right"
        onClick={rightIcon ? rightHandelAction : null}
      >
        {rightContent ? rightContent : rightIcon}
      </div>
    </div>
  );
}
